<template>

  <div class="bj">
    <div class="rem">rem 375 px</div>
    <div class="rem">京东生鲜</div>
    <van-tabs v-model="active">
      <van-tab title="精选"></van-tab>
      <van-tab title="水果"></van-tab>
      <van-tab title="海鲜"></van-tab>
      <van-tab title="肉禽蛋1"></van-tab>
    </van-tabs>

    <div class="bj_list">
      <div v-for="(item,index) in list" :key="index" class="bj_list_item">
        <div><img class="bj_list_item_img" :src="item.imUrl" alt=""></div>
        <div class="bj_list_item_name">{{item.name}}</div>
        <div class="bj_list_item_price">{{item.price}}</div>
        <div class="bj_list_item_pp"><del>{{item.pp}}</del></div>
        <div @click="ite()"><img class="bj_list_item_im" :src="item.imgUrl1" alt=""></div>

      </div>
    </div>
    <div class="qt">
      <router-view></router-view>

      <van-tabbar v-model="activ">

        <van-tabbar-item><img class="qt_fen" :src="icon.fen" alt="" srcset=""></van-tabbar-item>
        <van-tabbar-item><img class="qt_fen1" :src="icon.fen1" alt="" srcset=""></van-tabbar-item>
        <van-tabbar-item><img class="qt_fen2" :src="icon.fen2" alt="" srcset=""></van-tabbar-item>
        <van-tabbar-item><img class="qt_fen3" :src="icon.fen3" alt="" srcset=""></van-tabbar-item>
        <van-tabbar-item><img class="qt_fen4" :src="icon.fen4" alt="" srcset=""></van-tabbar-item>

      </van-tabbar>

    </div>
    <div class="bj_ds"><br>打赏</div>
    <div class="bj_fx"><br>分享</div>

    <!-- 使用float布局实现 -->
    <!-- <div class="rem">使用float布局实现</div>
    <div class="bj_list_float clearfix">
      <div v-for="(item,index) in list" :key="index" class="bj_list_float_item">
        <div class="bj_list_float_item_content">{{item.name}}</div>
      </div>
    </div> -->
  </div>
</template>
<script>
export default {
  name: "BJ",

  data () {
    return {
      activ: 0,
      item: [],

      icon: {
        // activ: require('../../shuiguo/others/59785684N54fd547d[1].jpg'),
        // activ: 'https://img.yzcdn.cn/vant/user-active.png',
        // inactiv: 'https://img.yzcdn.cn/vant/user-inactive.png',

        fen: require('../../shuiguo/others/59785684N54fd547d[1].jpg'),
        fen1: require('../../shuiguo/others/596f24c4N96c09230[1].jpg'),
        fen2: require('../../shuiguo/others/5a439b64N2e23ff19[1].jpg'),
        fen3: require('../../shuiguo/others/5996ad1dN723ecbfd[1].jpg'),
        fen4: require('../../shuiguo/others/5a4f5ce5N3dd12bd4[1].jpg'),






      },
      // icon: [
      //   {
      //     fen: require('../../shuiguo/others/59785684N54fd547d[1].jpg'),
      //   },
      //   {
      //     fen: require('../../shuiguo/others/596f24c4N96c09230[1].jpg'),
      //   },
      //   {
      //     fen: require('../../shuiguo/others/5a439b64N2e23ff19[1].jpg'),
      //   },
      //   {
      //     fen: require('../../shuiguo/others/5996ad1dN723ecbfd[1].jpg'),
      //   },
      //   {
      //     fen: require('../../shuiguo/others/5a4f5ce5N3dd12bd4[1].jpg'),

      //   }
      // ],

      active: 0,
      list: [],

    };
  },
  watch: {
    active: {
      handler: function (cur, old) {
        if (cur === 0) {
          this.list = [
            {
              imUrl: require('../../shuiguo/fruits/p(1).png'),
              name: "第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
              price: "￥21.8",
              pp: "￥29.8",
              imgUrl1: require('../../shuiguo/cart.png')

            },
            {
              name: "第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
              price: "￥21.8",
              pp: "￥29.8",
              imUrl: require('../../shuiguo/fruits/p(2).png'),
              imgUrl1: require('../../shuiguo/cart.png')
            },
            {
              imUrl: require('../../shuiguo/fruits/p(3).png'),
              name: "第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
              price: "￥21.8",
              pp: "￥29.8",
              imgUrl1: require('../../shuiguo/cart.png')

            },
            {
              imUrl: require('../../shuiguo/fruits/p(4).png'),
              name: "第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
              price: "￥21.8",
              pp: "￥29.8",
              imgUrl1: require('../../shuiguo/cart.png')

            },
            {
              imUrl: require('../../shuiguo/fruits/p(5).png'),
              name: "第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
              price: "￥21.8",
              pp: "￥29.8",
              imgUrl1: require('../../shuiguo/cart.png')

            },
            {
              imUrl: require('../../shuiguo/fruits/p(6).png'),
              name: "第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
              price: "￥21.8",
              pp: "￥29.8",
              imgUrl1: require('../../shuiguo/cart.png')

            },
          ]
        } else if (cur === 1) {
          this.list = [
            {
              imUrl: require('../../shuiguo/fruits/p(7).png'),
              name: "第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
              price: "￥21.8",
              pp: "￥29.8",
              imgUrl1: require('../../shuiguo/cart.png')

            },
            {
              name: "第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
              price: "￥21.8",
              pp: "￥29.8",
              imUrl: require('../../shuiguo/fruits/p(7).png'),
              imgUrl1: require('../../shuiguo/cart.png')
            },
            {
              imUrl: require('../../shuiguo/fruits/p(7).png'),
              name: "第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
              price: "￥21.8",
              pp: "￥29.8",
              imgUrl1: require('../../shuiguo/cart.png')

            },
            {
              imUrl: require('../../shuiguo/fruits/p(7).png'),
              name: "第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
              price: "￥21.8",
              pp: "￥29.8",
              imgUrl1: require('../../shuiguo/cart.png')

            },
            {
              imUrl: require('../../shuiguo/fruits/p(7).png'),
              name: "第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
              price: "￥21.8",
              pp: "￥29.8",
              imgUrl1: require('../../shuiguo/cart.png')

            },
            {
              imUrl: require('../../shuiguo/fruits/p(7).png'),
              name: "第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
              price: "￥21.8",
              pp: "￥29.8",
              imgUrl1: require('../../shuiguo/cart.png')

            },
            {
              imUrl: require('../../shuiguo/fruits/p(7).png'),
              name: "第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
              price: "￥21.8",
              pp: "￥29.8",
              imgUrl1: require('../../shuiguo/cart.png')

            },
            {
              imUrl: require('../../shuiguo/fruits/p(7).png'),
              name: "第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
              price: "￥21.8",
              pp: "￥29.8",
              imgUrl1: require('../../shuiguo/cart.png')

            },
          ]
        }
      }
    }
  },
  mounted () {
    this.init();
  },
  //初始化生命周期，调用init
  methods: {
    init () {
      this.list = [
        {
          imUrl: require('../../shuiguo/fruits/p(8).png'),
          name: "第二件9.8元湖北秭归中华 第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
          price: "￥21.8",
          pp: "￥29.8",
          imgUrl1: require('../../shuiguo/cart.png')

        },
        {
          name: "第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
          price: "￥21.8",
          pp: "￥29.8",
          imUrl: require('../../shuiguo/fruits/p(9).png'),
          imgUrl1: require('../../shuiguo/cart.png')
        },
        {
          imUrl: require('../../shuiguo/fruits/p(10).png'),
          name: "第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
          price: "￥21.8",
          pp: "￥29.8",
          imgUrl1: require('../../shuiguo/cart.png')

        },
        {
          name: "第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
          price: "￥21.8",
          pp: "￥29.8",
          imUrl: require('../../shuiguo/fruits/p(7).png'),
          imgUrl1: require('../../shuiguo/cart.png')
        },
        {
          imUrl: require('../../shuiguo/fruits/p(7).png'),
          name: "第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
          price: "￥21.8",
          pp: "￥29.8",
          imgUrl1: require('../../shuiguo/cart.png')

        },
        {
          name: "第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
          price: "￥21.8",
          pp: "￥29.8",
          imUrl: require('../../shuiguo/fruits/p(7).png'),
          imgUrl1: require('../../shuiguo/cart.png')
        },
        {
          imUrl: require('../../shuiguo/fruits/p(7).png'),
          name: "第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
          price: "￥21.8",
          pp: "￥29.8",
          imgUrl1: require('../../shuiguo/cart.png')

        },
        {
          name: "第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
          price: "￥21.8",
          pp: "￥29.8",
          imUrl: require('../../shuiguo/fruits/p(7).png'),
          imgUrl1: require('../../shuiguo/cart.png')
        },
        {
          imUrl: require('../../shuiguo/fruits/p(7).png'),
          name: "第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
          price: "￥21.8",
          pp: "￥29.8",
          imgUrl1: require('../../shuiguo/cart.png')

        },
        {
          name: "第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
          price: "￥21.8",
          pp: "￥29.8",
          imUrl: require('../../shuiguo/fruits/p(7).png'),
          imgUrl1: require('../../shuiguo/cart.png')
        },
        {
          imUrl: require('../../shuiguo/fruits/p(6).png'),
          name: "第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
          price: "￥21.8",
          pp: "￥29.8",
          imgUrl1: require('../../shuiguo/cart.png')

        },
        {
          name: "第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
          price: "￥21.8",
          pp: "￥29.8",
          imUrl: require('../../shuiguo/fruits/p(7).png'),
          imgUrl1: require('../../shuiguo/cart.png')
        },
        {
          imUrl: require('../../shuiguo/fruits/p(4).png'),
          name: "第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
          price: "￥21.8",
          pp: "￥29.8",
          imgUrl1: require('../../shuiguo/cart.png')

        },
        {
          name: "第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
          price: "￥21.8",
          pp: "￥29.8",
          imUrl: require('../../shuiguo/fruits/p(4).png'),
          imgUrl1: require('../../shuiguo/cart.png')
        },
        {
          imUrl: require('../../shuiguo/fruits/p(4).png'),
          name: "第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
          price: "￥21.8",
          pp: "￥29.8",
          imgUrl1: require('../../shuiguo/cart.png')

        },
        {
          name: "第二件9.8元湖北秭归中华 血橙 1kg 脐橙 单果140-200g3-6个 橙子坏果包赔",
          price: "￥21.8",
          pp: "￥29.8",
          imUrl: require('../../shuiguo/fruits/p(4).png'),
          imgUrl1: require('../../shuiguo/cart.png')
        },
      ]
      setTimeout(() => {
        // 这里是异步操作
        console.log(11111)
      }, 2000)
      console.log(2222)
      this.$refs.vanList.check();
    },
    ite () {
      const { loginStatus } = this.$store.getters;
      if (loginStatus === '0') {
        // 未登录
        this.$router.push({
          name: "Login"
        })
      } else {
        this.$router.push({
          name: "Users"
        })
      }
    }
  },





}

</script>
<style lang="scss">
.bj {
  position: relative;
  .rem {
    width: 750px;
    background-color: red;
  }
  background-color: #eee;
  min-height: 100vh;
  &_ds {
    position: fixed;
    width: 50px;
    height: 140px;
    background-color: red;
    top: 400px;
    right: 0;
    border-radius: 10px 0 0 10px;
    color: #eee;
    text-align: center;
    padding-bottom: 4px;
  }
  &_fx {
    display: flex;
    position: fixed;
    width: 40px;
    height: 140px;
    background-color: green;
    top: 630px;
    right: 0px;
    border-radius: 10px 0 0 10px;
    color: #eee;
    text-align: center;
    padding-bottom: 4px;
  }
  &_list {
    display: flex;
    flex-wrap: wrap;
    padding: 0 15px;
    &_item {
      position: relative;
      width: 340px;
      height: 400px;
      box-sizing: border-box;
      background-color: #fff;
      margin-bottom: 2px;

      &_img {
        width: 343px;
        height: 260px;
      }
      &_name {
        font-size: 14px;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      &_price {
        font-size: 20px;
        position: absolute;
        width: 40px;
        color: red;
      }
      &_pp {
        position: absolute;
        font-size: 10px;
        padding-left: 80px;
        padding-top: 5px;
      }
      &_im {
        width: 40px;
        height: 40px;
        padding-left: 280px;
      }
    }
    &_item:nth-child(odd) {
      margin-right: 2px;
    }
  }

  &_list_float {
    padding: 0 15px;
    &_item {
      float: left;
      width: 171.5px;
      height: 200px;
      box-sizing: border-box;
      background-color: #eee;
      margin-bottom: 2px;
    }
    &_item:nth-child(odd) {
      margin-right: 2px;
    }
  }

  .clearfix:after {
    /*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear: both;

    visibility: hidden;
  }
  .qt {
    img {
      width: 50px;
      height: 50px;
    }
  }
}
</style>